<template>
  <div class="flex flex-wrap">
    <el-image
      v-if="typeof modelValue === 'string'"
      :src="modelValue"
      fit="cover"
      class="w-[100px] h-[100px] rounded border mr-2"
      @click="open"
    ></el-image>
    <div
      v-else
      class="relative mx-1 mb-2 w-[100px] h-[100px]"
      v-for="url in modelValue"
    >
      <el-icon
        class="absolute right-[5px] top-[5px] cursor-pointer bg-white rounded-full"
        style="z-index: 10; color: #000"
        @click="removeImage(url)"
        ><CircleClose
      /></el-icon>
      <el-image
        :src="url"
        fit="cover"
        class="w-[100px] h-[100px] rounded border mr-2"
        @click="open"
      ></el-image>
    </div>
    <div class="choose-image-btn" @click="open">
      <el-icon :size="25" class="text-gray-500">
        <Plus />
      </el-icon>
    </div>
    <el-dialog v-model="dialogVisible" title="选择头像" width="70%" top="5vh">
      <div class="flex" style="height: 500px">
        <div style="width: 200px" class="image-aside">
          <imgagAside ref="imgAside" @change="change"></imgagAside>
        </div>
        <div class="image-main" style="width: 100%">
          <imageMain
            ref="imageMainRef"
            openChoose
            :imgLimit="imgLimit"
            @choose="chooseImages"
          ></imageMain>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveClick"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import imgagAside from "@/components/Image/imageAside.vue";
import imageMain from "@/components/Image/imageMain.vue";
import { ref } from "vue";
// const props = defineProps({
//     modelValue: [String,Array]
// })
let dialogVisible = ref(false);
let imageMainRef = ref("");
const callbackFunction = ref(null);
const open = (callback = null) => {
  callbackFunction.value = callback;
  dialogVisible.value = true;
};
const change = (id) => {
  imageMainRef.value.loadData(id);
};

// 让父组件通过v-model获取到值
const props = defineProps({
  modelValue: [String, Array],
  imgLimit: {
    type: Number,
    default: 1,
  },
  preview: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["update:modelValue"]);
// 获取到图片
let urls = [];
const chooseImages = (e) => {
  urls = e.map((o) => o.url);
};
// 确认选择图片
const saveClick = () => {
  let value = [];
  if (props.imgLimit === 1) {
    value = urls[0];
    // dialogVisible.value = false;
    // emit("update:modelValue", url);
  } else {
    value = props.preview
      ? [...props.modelValue, ...urls] || [...urls]
      : [...urls];
  }
  if (props.preview) {
    emit("update:modelValue", value);
  }
  if (typeof callbackFunction.value === "function") {
    callbackFunction.value(value);
  }
  dialogVisible.value = false;
};
// 删除图片
const removeImage = (url) => {
  emit(
    "update:modelValue",
    props.modelValue.filter((u) => u != url)
  );
};
defineExpose({
  open,
});
</script>

<style>
.image-header {
  border-bottom: 1px solid #eeeeee;
  @apply flex items-center;
}

.choose-image-btn {
  @apply w-[100px] h-[100px] rounded border flex justify-center items-center cursor-pointer hover: (bg-gray-100);
}

.image-aside {
  border-right: 1px solid #eeeeee;
  position: relative;
}

.image-main {
  position: relative;
}
</style>
